<template>
	<u-popup
		v-model="conversionShow"
		mode="bottom"
		:mask-close-able="false"
		class="chicken-edit">
		<view class="box">
			<scroll-view
				scroll-y
				@scrolltolower="scrolltolower"
				class="center">
				<!-- 用户 -->
				<UserInfo
					style="margin-top: 24rpx;"
					:show="conversionShow"
					:isEditName="false" />
				<!-- 兑换记录 -->
				<image
					class="record"
					@click="goJump({ type: 'eggConversionShow' })"
					src="/static/images/chicken/conversion_record.png"
					mode="widthFix"></image>
				<!-- 文字 -->
				<view class="info-box">
					<view class="info">
						<image
							src="/static/images/chicken/conversion_egg.png"
							mode="widthFix"></image>
						<text>累计获得鸡蛋**个，已兑换**个，可兑换**个</text>
					</view>
				</view>
				<view
					v-for="(val, index) in conversionList"
					:key="index"
					@click="goJump(val)"
					class="item">
					<view class="item-btn">
						<text>点击进入</text>
						<image
							src="/static/images/chicken/conversion_btn.png"
							mode="widthFix"></image>
					</view>
					<image
						class="item-bg"
						:src="val.img"
						mode="widthFix"></image>
				</view>
			</scroll-view>

			<image
				class="close"
				@click="changeShow"
				src="/static/images/chicken/conversion_arrow.png"
				mode="widthFix"></image>
		</view>
	</u-popup>
</template>

<script>
	import UserInfo from '@/components/userInfo';
	
	export default {
		name: 'myFriend',
		props: {
			conversionShow: {
				type: Boolean,
				default: false,
			},
		},
		components: {
			UserInfo,
		},
		data() {
			return {
				conversionList: [
					{
						img: '/static/images/chicken/conversion_1.png',
						type: 'farmShopShow',
					},
					{
						img: '/static/images/chicken/conversion_2.png',
						type: 'integralShopShow',
					},
					{
						img: '/static/images/chicken/conversion_3.png',
						type: 'exchangeAreaShow',
					},
				],
			}
		},
		mounted() {
			
		},
		methods: {
			changeShow() {
				this.$emit('changeShow', 'conversionShow');
			},
			scrolltolower() {
				console.log(1111111111);
			},
			goJump(val) {
				this.changeShow();
				console.log(val);
				if (val.type == 'integralShopShow') {
					console.log('积分商城');
				} else {
					this.$emit('changeShow', val.type);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.chicken-edit {
	.box {
		position: relative;
		width: 100%;
		height: 100vh;
		background-color: transparent;
		.center {
			position: absolute;
			left: 0;
			top: 124rpx;
			z-index: 1;
			width: 100%;
			height: calc(100% - 124rpx);
			text-align: center;
			.record {
				position: absolute;
				top: 0;
				right: 14rpx;
				width: 132rpx;
			}
			.info-box {
				width: 100%;
				margin: 40rpx 0 40rpx 24rpx;
				text-align: left;
				.info {
					display: inline-flex;
					justify-content: flex-start;
					align-items: center;
					padding: 0 14rpx;
					background-color: rgba(#EF8D34, .5);
					border-radius: 25rpx;
					font-size: 24rpx;
					color: #fff;
					image {
						width: 48rpx;
					}
				}
			}
			.item {
				position: relative;
				display: flex;
				width: calc(100% - 40rpx);
				margin: 0 0 20rpx 20rpx;
				padding-bottom: 30rpx;
				border-radius: 20rpx;
				font-size: 28rpx;
				color: #fff;
				overflow: hidden;
				.item-bg {
					width: 100%;
				}
				.item-btn {
					position: absolute;
					left: 50%;
					bottom: 5rpx;
					z-index: 1;
					transform: translateX(-50%);
					width: 170rpx;
					image {
						width: 170rpx;
					}
					text {
						position: absolute;
						left: 50%;
						top: 22rpx;
						z-index: 1;
						transform: translateX(-50%);
						width: 100%;
					}
				}
			}
		}
		.close {
			position: absolute;
			left: 26rpx;
			top: 30rpx;
			width: 64rpx;
		}
	}
}
</style>